<template>
  <div v-if="item" class="generate-item">
    <div v-if="item.type == 'div'" :style="item.style" :class="item.class">
      <template v-if="item.children && item.children.length > 0">
        <GenerateItem
          v-for="(child, index) in item.children"
          :key="index"
          :item="child"
        >
        </GenerateItem>
      </template>
    </div>
    <template v-else>
      <div class="item">
        <label :style="item.labelStyle">
          <span style="color: red">*</span>
          {{ item.name }}
        </label>
        <el-input
          v-if="item.type == 'el-input'"
          v-model="item.bindModel"
          :style="item.style"
          :placeholder="item.placeholder"
          :maxlength="item.maxlength"
          :show-word-limit="item.maxlength && item.maxlength > 0"
          :clearable="item.clearable"
          :disabled="item.disabled"
        ></el-input>

        <el-input
          v-if="item.type == 'el-textarea'"
          v-model="item.bindModel"
          type="textarea"
          :style="item.style"
          :placeholder="item.placeholder"
          :clearable="item.clearable"
          :maxlength="item.maxlength"
          :show-word-limit="item.maxlength && item.maxlength > 0"
          :autosize="{
            minRows: item.minRows,
            maxRows: item.maxRows
          }"
          :disabled="item.disabled"
        ></el-input>

        <el-select
          v-if="item.type == 'el-select'"
          v-model="item.bindModel"
          :style="item.style"
          :clearable="item.clearable"
          :disabled="item.disabled"
          filterable
          @change="$emit('checkShow')"
        >
          <el-option
            v-for="ops in item.options"
            :key="ops.value"
            :label="ops.label"
            :value="ops.value"
          >
          </el-option>
        </el-select>

        <el-date-picker
          v-if="item.type == 'el-date-picker'"
          v-model="item.bindModel"
          :style="item.style"
          :type="item.dateType"
          :value-format="item.valueFormat"
          :placeholder="item.placeholder"
          :clearable="item.clearable"
          :disabled="item.disabled"
        >
        </el-date-picker>

        <el-cascader
          v-if="item.type == 'el-cascader'"
          v-model="item.bindModel"
          :options="item.options"
          :style="item.style"
          :clearable="item.clearable"
          :disabled="item.disabled"
          :filterable="item.filterable"
          :show-all-levels="false"
          :placeholder="item.placeholder"
          :props="{
            expandTrigger: 'hover',
            multiple: item.multiple,
            checkStrictly: true,
            label: item.lableMap,
            value: item.valueMap
          }"
        >
        </el-cascader>

        <el-input-number
          v-if="item.type == 'el-input-number'"
          v-model="item.bindModel"
          :min="item.min || 0"
          :max="item.max || 99999999999"
          :step="1"
          :controls="true"
          :precision="item.precision || 2"
          :controls-position="item.controlsPosition || 'right'"
        >
        </el-input-number>

        <generate-upload
          v-if="item.type == 'el-upload'"
          :disabled="item.disabled"
          :tableName="item.tableName"
          :useType="item.useType"
        ></generate-upload>
      </div>
    </template>
  </div>
</template>

<script>
import GenerateUpload from './components/GenerateUpload.vue';
export default {
  components: { GenerateUpload },
  name: 'GenerateItem',
  props: {
    item: {
      type: Object,
      default: null
    }
  }
};
</script>

<style lang="scss" scoped>
.generate-item {
  margin-top: 10px;
}

.rows {
  display: flex;
  align-items: center;
}

.item {
  display: flex;
  align-items: center;
  label {
    flex: none;
    text-align: right;
    width: 130px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 14px;
  }
}
</style>
